<template>
  <dv-border-box-12 class="center">
    <div class="d-flex" style="margin-left:10px">
      <span>
        <span><i class="iconfont icon-align-left"></i></span>
      </span>
      <span class="fs-xl text mx-2 mt-1" style="font-size:19px;color: #eaedf3;">{{title}}</span>
    </div>
    <dv-capsule-chart
      :config="config"
      id="bar-chart"
    />
  </dv-border-box-12>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted } from "vue";
export default defineComponent({
  components: {},
  props: {
    title: {
      type: String,
      default: "",
    },
    PieIndex: {
      type: Number,
      default: 0
    },
    piedata: {
      type: Array as () => Array<{ name: string; value: number }>,
      default: () => []
    }
  },
  setup(props) {
    // 初始化数据
    const config = reactive({
      data:props.piedata,
      rowNum: 5,
      showValue: true
    });
``
    onMounted(() => {

    });

    // 设置数据
    return {
      // getPieTitle,
      config
    };
  },
});
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;
  height: 100%;
  .d-flex {
    margin-top: 4%;
  }
  #bar-chart {
    font-size: 25px;
    width: 95%;
    height: 87%; 
    margin: 0px auto;
  }
}
</style>